<!-- 查看单一投票详情 -->
<template>
    <div class="voteShow">
				<myheader title="投票详情" rightBtn="确定投票" @updataInfo="submitVote"></myheader>
			
			<ul class="voteShow_div" v-for="(item,index) in  voteInfo" :key="index" >
				<li class="voteShow_div_li1">
					<div style="display:flex;">
						<!-- 用户头像框 -->
						<img :src="item.user.avatar" alt="">
					
					
					<div class="voteShow_div_li1_div2">
						<p>发起人：{{item.user.username}}</p>
						<p>开始时间：{{Fromdata (item.startTime)}}</p>
					</div>
						</div>	
							<li  class="voteShow_div_li2">
								{{item.title}}
							</li>
							
							<li   class="voteShow_div_li3"  >
							          <van-field name="radio" label="请选择">
											<template #input>
											<div v-if="item.type==1">
												<van-radio-group v-model="checked[0]" direction="horizontal" >
												<van-radio  shape= 'round'  :name="items" v-for="(items,indexs) in item.optionList" :key="indexs" >{{items}}</van-radio>
												</van-radio-group>

											</div>
												<van-checkbox-group v-else  v-model="checked"  >
													<van-checkbox  shape="square"  :name="items" v-for="(items,indexs) in item.optionList" :key="indexs">{{items}}</van-checkbox>   
												</van-checkbox-group>
																					
												</template>
									</van-field>
							</li>
							
							<li   class="voteShow_div_li4">
								
							</li>
							
							<li  class="voteShow_div_li5">
								截止时间：{{Fromdata (item.endTime)  }}
							</li>
				</li>			
			</ul>
     <!--  投票人内容 -->
			<van-collapse v-model="activeNames" >
				<van-collapse-item name="1" v-if="optionMap" >
					<template #title>
					<div>投票详情 <van-icon name="question-o" /></div>
				 	</template>

	 			<van-grid :gutter="10" :border="true">
					<van-grid-item v-for="(item,index ) in voteUserList " :key="index" >
						<van-image 
						  round
							lazy-load
						:src="item.avatar"
						/>
					</van-grid-item>
					</van-grid>
					<!-- 数据分析 -->

					<van-cell  style="margin-top:0.5rem;" title="选项分析"  value="数据占比" />		
                    <div  v-for="( value, key ,index) in optionMap " :key="index" style="margin-top:3px;">
						<span >选项: <van-tag plain type="primary" size="medium" >{{checked[index]}}</van-tag></span><el-progress :percentage="Number(Number((value/selectPeople)*100).toFixed(2)) > 100 ? '100' :Number(Number((value/selectPeople)*100).toFixed(2)) "></el-progress>{{value}}人选择 
					</div>
					
				</van-collapse-item>
				<van-empty v-else description="暂无人员进行投票" />
			</van-collapse>

   

		</div>
</template>

<script>
import { Notify } from 'vant'
	import formatDateTime from "../../../utils/data"
	import myheader from '../../../comon/myheader.vue'
import { Dialog } from 'vant';
export default {
    data () {
      return {
				  voteInfo:[], // 投票信息
				  currentUserId :this.$store.getters.getUserInfo.id, 
				  checked:[], // 单选项
				  voteInfoId:'', // 当前投票的id
				  activeNames:["1"],
				  voteIndex:0, // 当前用户投票的索引值
				  voteUserList:[],// 当前票的所有投票人信息
				  optionList:[],//选项的内容列表
				  optionMap:{}, // 选择的人数及选项
				   selectPeople:0
			}
    },
		created() {
					this.initvote();
				    
				},
 
    methods: {
		 Fromdata (value) {
            return  formatDateTime.formatDateTime4(value)    
     		 },
			initvote(){
				
				  this.voteInfo.push(JSON.parse(this.$route.query.item))
		          this.voteInfoId = JSON.parse(this.$route.query.item).id
				  this.getvote();
			},
			// 提交投票
			submitVote(){
          
					Dialog.confirm({
  title: '投票确认',
  message: '是否确认投票？',
})
  .then(async () => {
    // on confirm
			if(this.checked.length>0){
			      const res = await this.$axios.post("/vote/castVote",{
						voteId: this.voteInfoId,       /*某条投票的id*/
						userId: this.currentUserId,       /*当前登录用户的id，会作为此投票的投票人*/
						optionList:this.checked   /*投票人的投票选择*/
          
				  }) 
				    if(res.data.code == 200)
					{
						this.$router.push("/vote")	
                       Notify({type:"success",message:"投票成功！"})
				    }
			 
			}else{
				  Notify({type:"danger",message:"请先选择再投票"})
			}

  })
  .catch(() => {
    // on cancel
  });
					
				


            },
			// 获取当前选票投票人的信息
			async	getvote(){
				 const res = await this.$axios.get("/vote/info/"+this.voteInfoId +"?userId="+this.currentUserId ) 
				 
				if(res.data.code == 200){
					 this.voteUserList=res.data.data .voteUserList
					 this.voteIndex=res.data.data.voteIndex
					 this.optionList=res.data.data.optionList
					 this.optionMap =res.data.data.optionMap

					if(this.voteIndex){
						  for (let j = 0; j < this.voteIndex.length; j++) {
							  this.checked.push(this.optionList[this.voteIndex[j]]) 
						  }
						
					}
					if(this.optionMap){
                       this.selectPeople = Object.keys(this.optionMap).length
					}
				 
							
				 }
				  
				 
				 
				  
			},
		},
		


    components: {
			myheader,
		},
}
</script>

<style scoped>
.voteShow{
	margin-top: 46px;
	
}
	.voteShow_div{
		padding: 10px;
	}
	.voteShow_div_li1{
		display: flex;
	   flex-direction: column;
		width: 100%;
		 font-size: 16px;
       color: #445588;
	}
	.voteShow_div_li1>div>img{
		height: 60px;
		width: 60px;
	}
	.voteShow_div_li1_div2{
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		font-size: 16px;
		justify-content: space-around;
		/* justify-content: center; */
		align-items: center;
	}
	.voteShow_div_li1_div2>p:first-child{
		font-weight: bold;
		color: #304D80;
	}
	.voteShow_div_li1_div2>p{
		padding-left: 10px;
		width: 100%;
	}
	
	/* 标题 */
	.voteShow_div_li2{
		font-size: 18px;
	    margin-top: 0.6rem;
		
		
	}
	
	.voteShow_div_li3{
		padding-top: 10px;
		font-size: 12px;
	}
	.voteShow_div_li5{
		font-size: 1em;
		color: #94b4eb;
	}

</style>
